<template>
        <datu></datu>

        <div class="title">一&nbsp;&nbsp;&nbsp;产品展示&nbsp;&nbsp;&nbsp;一</div>

        <ul class="outer_goods">
                <li>
                        <div class="image"></div>
                        <div class="detail">了解详情</div>
                </li>

                <li>
                        <div class="image"></div>
                        <div class="detail">了解详情</div>
                </li>

                <li>
                        <div class="image"></div>
                        <div class="detail">了解详情</div>
                </li>
        </ul>

        <ul class="outer_goods">
                <li>
                        <div class="image"></div>
                        <div class="detail">了解详情</div>
                </li>

                <li>
                        <div class="image"></div>
                        <div class="detail">了解详情</div>
                </li>

                <li>
                        <div class="image"></div>
                        <div class="detail">了解详情</div>
                </li>
        </ul>

        <ul class="outer_goods">
                <li>
                        <div class="image"></div>
                        <div class="detail">了解详情</div>
                </li>

                <li>
                        <div class="image"></div>
                        <div class="detail">了解详情</div>
                </li>

                <li>
                        <div class="image"></div>
                        <div class="detail">了解详情</div>
                </li>
        </ul>

        <div class="xinwen">一&nbsp;&nbsp;&nbsp;新闻中心&nbsp;&nbsp;&nbsp;一</div>

        <ul class="message_ul">
                <li v-for="(item,index) in messageList" :key="item.id" class="message_item">
                        <div class="item_id">
                                {{item.id}}
                        </div>

                        <div class="item_message">
                                {{item.message}}
                        </div>

                        <div class="item_time">
                                {{item.time}}
                        </div>

                </li>
        </ul>

        <div class="er_wei_ma">
                <div class="er_wei_ma_img"></div>
                <div class="er_wei_ma_message">扫码立即咨询</div>
        </div>

        <dibu></dibu>
</template>

<script>
    import toubu from '../../components/toubu.vue'
    import datu from '../../components/datu_1.vue'
    import dibu from '../../components/dibu.vue'
    import {ref} from 'vue'
    export default {
        name: "shouye",
        components:{
            toubu,
            datu,
            dibu,
        },
        setup(){
            const messageList=ref([
                    {
                            id:1,
                            message:"高频焊机优点及适用范围",
                            time:"2021-06-16",
                    },

                    {
                            id:2,
                            message:"高频干燥机概述",
                            time:"2021-05-26",
                    },

                    {
                            id:3,
                            message:"高频机的焊接原理及其优点",
                            time:"2021-05-16",
                    },

                    {
                            id:4,
                            message:"高周波的热处理及适用范围",
                            time:"2021-05-05",
                    },

                    {
                            id:5,
                            message:"高频机的焊接原理及其优点",
                            time:"2021-05-16",
                    },

                    {
                            id:6,
                            message:"高周波的热处理及适用范围",
                            time:"2021-05-05",
                    },
            ])

                return {
                        messageList,
                }
        },
    }
</script>

<style scoped>
        .title{font-size: 45px;line-height: 45px;color: #0b4da1;margin-top: 58px;width: 100%;text-align: center;}
        .outer_goods{width: 1167px;margin: 36px auto;display: flex;flex-direction: row;justify-content: space-between;}
        .outer_goods>li{width: 365px;height: 417px;border: solid 1px #e8e8e8;}
        .outer_goods>li:hover{border: 1px solid #0c4da1;cursor: pointer;}
        .outer_goods>li:hover .detail{background-color: #0c4ca3;color: white;}
        .image{width: 324px;height: 276px;background: url("http://120.78.80.190/chanpintu.png");background-size: 100% 100%;background-repeat: no-repeat;margin: 23px auto;}
        .detail{width: 222px;height: 61px;margin: 26px auto;border: 1px solid #3e70b5;font-size: 18px;text-align: center;line-height: 61px;color: #3e70b5;}

        .xinwen{font-size: 45px;line-height: 45px;color: #0b4da1;margin-top: 79px;width: 100%;text-align: center;}
        .message_ul{margin-top: 66px;width: 1167px;margin: 66px auto;}
        .message_item{display: flex;flex-direction: row;height: 44px;border-bottom: 1px solid #e8e8e8;cursor: pointer;}
        .message_item:hover .item_id{background-color: #0a4ea1; color: white;}
        .item_id{width: 27px;height: 27px;margin-top:10px;background-color: #cccccc;color: white;margin-left: 21px;font-size: 13px;line-height: 27px;text-align: center;}
        .item_message{height: 100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;flex-grow: 1;margin-left: 20px;font-size: 24px;line-height: 44px;}
        .item_time{align-items: end;margin-right: 12px;height: 100%;font-size: 16px;line-height: 44px;color: #838383;}

        .er_wei_ma{width: 181px; height: 219px;border-radius: 10px;border: 1px solid #9a9a9a;background-color: #f2f2f2;position: fixed;right: 70px;top: 550px;}
        .er_wei_ma_img{width: 149px;height: 149px;margin: 15px auto;background: url("http://120.78.80.190/ewm.png");background-size: 100% 100%;background-repeat: no-repeat;}
        .er_wei_ma_message{color: #8e8e8e;width: 149px;height: 18px;font-size: 18px;line-height: 18px;text-align: center;margin: 17px auto;}
</style>